<template>
	<view class="content">
		<!-- <u-navbar :border-bottom="false" :custom-back="handleToBack"></u-navbar> -->
		<view class="content_tit">
			<view>您好，欢迎注册</view>
			<text>请完善企业资料</text>
		</view>
		<view class="content_main">
			<u-form :model="data.formData" :error-type="['toast']" ref="form1">
				<u-form-item required label="企业LOGO" prop="basic.logo" label-width="200">
					<view class="u-flex u-flex-1 u-row-right">
						<u-upload :custom-btn="true" :fileList="data.fileList" :action="data.action"
							:header="data.header" @on-success="uploadSuccess" @on-remove="uploadRemove" :max-count="1"
							:width="100" :height="100">
							<template v-slot:addBtn>
								<u-image src="/pages/pagesPersonal/static/companyLogo.png" :width="100"
									mode="widthFix"></u-image>
							</template>
						</u-upload>
					</view>
				</u-form-item>
				<u-form-item required label="企业名称" prop="basic.companyname" label-position="top">
					<u-input v-model="data.formData.basic.companyname" :clearable="true" placeholder="请输入企业名称" />
				</u-form-item>
				<u-form-item required label="企业性质" prop="nature_text" label-position="top">
					<view class="u-flex u-flex-1 u-row-between" @click="data.isNature=true">
						<u-input v-model="data.formData.nature_text" placeholder="请选择企业性质" disabled
							@click="data.isNature=true" />
						<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="企业规模" label-position="top">
					<view class="u-flex u-flex-1 u-row-between" @click="data.isScale=true">
						<u-input v-model="data.formData.scale_text" placeholder="请选择企业规模" disabled
							@click="data.isScale=true" />
						<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
					</view>
				</u-form-item>
				<u-form-item required label="所属行业" prop="trade_text" label-position="top">
					<view class="u-flex u-flex-1 u-row-between" @click="data.isTrade=true">
						<u-input v-model="data.formData.trade_text" placeholder="请选择所属行业" disabled
							@click="data.isTrade=true" />
						<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="注册资金" label-position="top">
					<view class="u-flex u-flex-1 u-row-between ">
						<u-input type="number" v-model="data.formData.basic.registered" placeholder="请输入注册资金" />
						<view class="u-font-28 u-m-l-20" style="color: #101010;">
							万人民币
						</view>
					</view>
				</u-form-item>
				<u-form-item label="企业网址" prop="info.website" label-position="top">
					<u-input v-model="data.formData.info.website" :clearable="true" placeholder="请输入企业网址" />
				</u-form-item>
				<u-form-item label="公司福利" label-position="top">
					<view class="u-flex u-flex-1 u-row-between" @click="handleToProfile">
						<u-input v-model="data.formData.tag_text" type="textarea" height="70" style="width: 100%;"
							placeholder="请选择公司福利" disabled @click="handleToProfile" />
						<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
					</view>
				</u-form-item>
				<u-form-item required label="所在地区" prop="district_text" label-position="top">
					<view class="u-flex u-flex-1 u-row-between" @click="getShow">
						<u-input v-model="data.formData.district_text" placeholder="请选择所在地区" disabled
							@click="getShow" />
						<u-icon name="arrow-right" color="#bbbbbb" size="40"></u-icon>
					</view>
				</u-form-item>
				<u-form-item label="详细地址" label-position="top">
					<template v-slot:rightTitle>
						<view class="u-flex" @click="handlerShowMap">
							<u-image class="u-m-b-6" src="/pages/pagesPersonal/static/location_ico_blue.png" :width="40"
								:height="40" mode="widthFix"></u-image>
							<view class="u-font-16 u-m-l-16 u-flex u-col-top">标注</view>
						</view>
					</template>
					<u-input v-model="data.formData.info.address" :clearable="true" placeholder="请输入详细地址" />
				</u-form-item>
				<u-form-item required label="企业介绍" prop="info.content" label-position="top">
					<view class="content_main_item">
						<u-input type="textarea" maxlength="500" height="200" v-model="data.formData.info.content"
							placeholder="请输入企业介绍">
						</u-input>
						<view class="content_main_item_txt">
							<text>{{data.formData.info.content.length}}</text>/500
						</view>
					</view>
				</u-form-item>
				<u-form-item required label="联系人" prop="contact.contact" label-position="top">
					<u-input v-model="data.formData.contact.contact" :clearable="true" placeholder="请输入联系人" />
				</u-form-item>
				<u-form-item required label="联系电话" prop="contact.mobile" label-position="top">
					<u-input v-model="data.formData.contact.mobile" :clearable="true" maxlength="11"
						placeholder="请输入联系电话" />
				</u-form-item>
				<u-form-item label="联系微信" prop="contact.weixin" label-position="top">
					<template v-slot:rightTitle>
						<u-checkbox shape="circle" v-model="data.check">同手机号</u-checkbox>
					</template>
					<u-input v-model="data.formData.contact.weixin" placeholder="请输入联系微信" @input="change"
						:clearable="true" />
				</u-form-item>
				<u-form-item label="联系固话" prop="contact.telephone" label-position="top">
					<u-input v-model="data.formData.contact.telephone" :clearable="true" placeholder="请输入联系固话" />
				</u-form-item>
				<u-form-item label="联系邮箱" prop="contact.email" label-position="top">
					<u-input v-model="data.formData.contact.email" :clearable="true" placeholder="请输入联系邮箱" />
				</u-form-item>
				<u-form-item label="联系QQ" prop="contact.qq" label-position="top">
					<u-input v-model="data.formData.contact.qq" :clearable="true" placeholder="请输入联系QQ" />
				</u-form-item>
			</u-form>
		</view>

		<!-- 地区 -->
		<u-popup v-model="data.idcitycategory" mode="bottom" height="70%">
			<view class="poplist">
				<view class="botList" v-for="(item,index) in data.districtList" :key="index"
					:class="data.isId == item.value? 'active':''" @tap="leftClick(item.value,item.children,item.label)">
					<text>{{item.label}}</text>
					<u-icon name="arrow-right" v-if="item.children.length>0"
						:color="data.isId == item.value? '#00D075':'#867F7F'" size="28"></u-icon>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="data.idcitycategory2" mode="right" width="70%">
			<view class="poplist poplist2">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="botList" v-for="(item,index) in data.childrenlist" :key="index"
						:class="data.isId2 == item.value? 'active':''"
						@tap="leftClick2(item.value,item.children,item.label)">
						<text>{{item.label}}</text>
						<u-icon name="arrow-right" v-if="item.children.length>0"
							:color="data.isId2 == item.value? '#00D075':'#867F7F'" size="28"></u-icon>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="data.idcitycategory3" mode="right" width="55%">
			<view class="poplist poplist2">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="botList" v-for="(item,index) in data.childrenlist2" :key="index"
						:class="data.isId3 == item.value? 'active':''" @tap="leftClick3(item.value,item.label)">
						<text>{{item.label}}</text>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 选择地区结束 -->

		<!-- 行业 -->
		<u-select v-model="data.isTrade" :list="data.tradeList" @confirm="tradeConfirm" value-name="id"
			label-name="name" :default-value="data.defaultTra"></u-select>
		<!-- 规模 -->
		<u-select v-model="data.isScale" :list="data.scaleList" @confirm="scaleConfirm" value-name="id"
			label-name="name" :default-value="data.defaultSca"></u-select>
		<!-- 性质 -->
		<u-select v-model="data.isNature" :list="data.natureList" @confirm="natureConfirm" value-name="id"
			label-name="name" :default-value="data.defaultIndex"></u-select>

		<u-bottom-button confirmText="保存" @confirm="submit"></u-bottom-button>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
	} from "vue";
	import {
		onReady,
		onLoad,
		onShow,
		onBackPress,
		onUnload
	} from '@dcloudio/uni-app'
	import development from '/config/development'
	import production from '/config/productions'
	const host = process.env.NODE_ENV === 'development' ? development.host : production.host;
	const form1 = ref();
	const data = reactive({
		action: host + '/v1_0/member/upload/index',
		header: {
			"user-token": uni.getStorageSync('token')
		},
		// 是否同步手机号
		check: false,
		fileList: [],
		// 行业
		isTrade: false,
		tradeList: [],
		// 性质
		isNature: false,
		natureList: [],
		// 规模
		isScale: false,
		scaleList: [],
		// 地区
		isDistrict: false,
		districtList: [],
		// 企业福利选中数据
		selectedTags: [],
		formData: {
			nature_text: '',
			trade_text: '',
			scale_text: '',
			district_text: '',
			tag_text: '',
			basic: {
				logo: '',
				companyname: '',
				short_name: '',
				registered: '',
				currency: '',
				nature: '',
				trade: '',
				scale: '',
				district1: '',
				map_lat: '',
				map_lng: '',
				tag: []
			},
			contact: {
				contact: '',
				mobile: '',
				weixin: '',
				telephone: '',
				email: '',
				qq: '',
				is_secrecy: 1
			},
			info: {
				content: '',
				address: '',
				website: ''
			}
		},
		rules: {
			"basic.logo": [{
				required: true,
				message: '请上传企业LOGO',
				trigger: 'change'
			}],
			"basic.companyname": [{
				required: true,
				message: '请输入企业名称',
				trigger: 'change',
			}],
			nature_text: [{
				required: true,
				message: '请选择企业性质',
				trigger: 'change',
			}],
			trade_text: [{
				required: true,
				message: '请选择所属行业',
				trigger: 'change',
			}],
			district_text: [{
				required: true,
				message: '请选择所在地区',
				trigger: 'change',
			}],
			"info.content": [{
				required: true,
				message: '请输入企业介绍',
				trigger: 'change',
			}],
			"contact.contact": [{
				required: true,
				message: '请输入联系人',
				trigger: 'change',
			}, {
				validator: (rule, value, callback) => {
					return uni.$u.test.name(value);
				},
				message: '请输入正确的联系人'
			}],
			"contact.mobile": [{
				required: true,
				message: '请输入联系电话',
				trigger: 'change',
			}, {
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '请输入正确的联系电话'
			}]
		},
		idcitycategory: false,
		idcitycategory2: false,
		idcitycategory3: false,
		isId: null,
		isId2: null,
		isId3: null,
		childrenlist: [],
		childrenlist2: [],
		defaultIndex: [0],
		defaultSca: [0],
		defaultTra: [0],
		// 监听页面卸载时 是否返回选择身份页面
		isBack: true,
	});
	onReady(() => {
		form1.value.setRules(data.rules)
	})
	onLoad(() => {
		// ios侧滑返回功能（关闭）
		var pages = getCurrentPages();
		var page = pages[pages.length - 1];
		// #ifdef APP-PLUS
		var currentWebview = page.$getAppWebview();
		currentWebview.setStyle({ popGesture: 'none' });
		// #endif
		getClassifyInfo()
	})
	onShow(() => {
		uni.$once('handlerCloseTag', res => {
			data.selectedTags = res.selectedTags
			data.formData.basic.tag = res.tagIdArr
			data.formData.tag_text = res.tagTextArr.join(",")
		})
	})
	watch(() => [data.check, data.formData.contact.mobile], (nv) => {
		if (nv[0]) data.formData.contact.weixin = data.formData.contact.mobile
	}, {
		deep: true
	})

	//选择地区点击事件
	const leftClick = (id, list, name) => {
		data.isId = id
		data.isId2 = 0
		data.isId3 = 0
		data.formData.district_text = name
		data.formData.basic.district1 = id
		data.formData.basic.district2 = 0
		data.formData.basic.district3 = 0
		data.childrenlist2 = []
		data.childrenlist = list
		if (list.length > 0) {
			data.idcitycategory2 = true
		} else {

			data.idcitycategory = false
			data.idcitycategory2 = false
			data.idcitycategory3 = false

		}

	}
	const leftClick2 = (id, list, name) => {
		data.isId2 = id
		data.isId3 = 0
		data.childrenlist2 = list
		data.formData.district_text = name
		data.formData.basic.district1 = data.isId
		data.formData.basic.district2 = id
		data.formData.basic.district3 = 0
		if (data.childrenlist2.length > 0) {
			data.idcitycategory3 = true
		} else {

			data.idcitycategory = false
			data.idcitycategory2 = false
			data.idcitycategory3 = false
		}

	}

	const leftClick3 = (id, name) => {
		data.isId3 = id
		data.formData.district_text = name
		data.formData.basic.district1 = data.isId
		data.formData.basic.district2 = data.isId2
		data.formData.basic.district3 = id
		data.idcitycategory = false
		data.idcitycategory2 = false
		data.idcitycategory3 = false

	}
	// 去企业福利页面
	const handleToProfile = () => {
		uni.$u.route('/pages/pagesPersonal/companyInfo/profile', {
			selectedTags: JSON.stringify(data.selectedTags)
		})
	}
	// 微信号输入时 取消同手机号
	const change = (val) => {
		if (uni.$u.test.isEmpty(val)) return
		data.check = false
	}
	// 规模选择
	const scaleConfirm = (e) => {
		data.formData.scale_text = e[0].label
		data.formData.basic.scale = e[0].value
		let cur = data.scaleList.findIndex(item => {
			return item.name == e[0].label
		})

		if (cur != -1) {
			data.defaultSca = [cur]
		}
	}
	// 行业选择
	const tradeConfirm = (e) => {
		data.formData.trade_text = e[0].label
		data.formData.basic.trade = e[0].value
		let cur = data.tradeList.findIndex(item => {
			return item.name == e[0].label
		})

		if (cur != -1) {
			data.defaultTra = [cur]
		}
	}
	// 性质选择
	const natureConfirm = (e) => {
		data.formData.nature_text = e[0].label
		data.formData.basic.nature = e[0].value
		let cur = data.natureList.findIndex(item => {
			return item.name == e[0].label
		})
		if (cur != -1) {
			data.defaultIndex = [cur]
		}
	}
	// 地区选择

	const getShow = () => {
		data.idcitycategory = true
		if (data.isId2) {
			data.idcitycategory2 = true
		}
		if (data.isId3) {
			data.idcitycategory3 = true
		}
	}

	// 获取字典表信息
	const getClassifyInfo = async () => {
		let params = {
			type: 'citycategory,companyNature,companyScale,trade,experience'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		// 地区列表
		data.districtList = res.citycategory
		// 企业性质列表
		data.natureList = res.companyNature
		// 企业行业列表
		data.tradeList = res.trade
		// 企业规模列表
		data.scaleList = res.companyScale
	}
	// 选择位置
	const handlerShowMap = () => {
		uni.chooseLocation({
			success: (res) => {
				data.formData.info.address = res.address
				data.formData.basic.map_lat = res.latitude
				data.formData.basic.map_lng = res.longitude
			}
		});
	}
	// 图片上传
	const uploadSuccess = (res) => {
		if (res.code == 200) {
			data.formData.basic.logo = res.data.file_id
			data.formData.fileList = [{
				url: res.data.file_url
			}]
			uni.$u.toast('上传成功')
		}
	}
	// 图片删除
	const uploadRemove = () => {
		data.formData.fileList = []
		data.formData.basic.logo = ''
	}
	// 保存
	const submit = () => {
		form1.value.validate(async valid => {
			if (valid) {
				if (!uni.$u.test.isEmpty(data.formData.info.website) && !uni.$u.test.isUrl(data
						.formData
						.info.website)) {
					return uni.$u.toast('请输入正确的企业网址');
				}
				if (!uni.$u.test.isEmpty(data.formData.contact.weixin) && !uni.$u.test.wx(data.formData
						.contact.weixin) && !uni.$u.test.mobile(data.formData.contact.weixin)) {
					return uni.$u.toast('请输入正确的联系微信');
				}
				if (!uni.$u.test.isEmpty(data.formData.contact.telephone) && !uni.$u.test.isMob(data
						.formData.contact.telephone)) {
					return uni.$u.toast('请输入正确的联系固话');
				}
				if (!uni.$u.test.isEmpty(data.formData.contact.email) && !uni.$u.test.email(data
						.formData.contact.email)) {
					return uni.$u.toast('请输入正确的联系邮箱');
				}
				if (!uni.$u.test.isEmpty(data.formData.contact.qq) && !uni.$u.test.qq(data
						.formData.contact.qq)) {
					return uni.$u.toast('请输入正确的联系QQ');
				}
				let params = {
					basic: data.formData.basic,
					info: data.formData.info,
					contact: data.formData.contact
				}
				let res = await uni.$u.api.company_profile(params)
				uni.$u.toast('保存成功')
				uni.setStorageSync('next_code', 50004)
				data.isBack = false
				setTimeout(() => {
					uni.$u.route({
						type: 'reLaunch',
						url: 'pages/pagesPersonal/set/auth/auth'
					})
				}, 1000)
			}
		});
	}
	// #ifdef APP-PLUS
	// 监听返回事件
	onBackPress((event) => {
		uni.$u.route({
			type: 'reLaunch',
			url: '/pages/login/status'
		})
		return true
	})
	// #endif
	// #ifdef MP-WEIXIN
	onUnload(() => {
		if (data.isBack) {
			uni.$u.route({
				type: 'reLaunch',
				url: '/pages/login/status'
			})
		}
	})
	// #endif
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 56rpx;
		color: #101010;

		:deep(.u-list-item) {
			overflow: inherit;
		}

		:deep(.u-delete-icon) {
			width: 30rpx;
			height: 30rpx;
			right: -10rpx;
			top: -10rpx;
		}

		:deep(.u-checkbox__label) {
			margin-right: 0 !important;
		}

		&_tit {
			view {
				font-size: 48rpx;
				font-weight: bold;
			}

			text {
				color: #8a8888;
				color: 32rpx;
				margin-top: 10rpx;
				display: block;
			}
		}

		&_main {
			padding-bottom: 150rpx;
			margin-top: 80rpx;

			&_item {
				width: 100%;
				flex-direction: column;

				&_txt {
					font-size: 28rpx;
					text-align: right;

					text {
						color: #00D075;
					}
				}
			}
		}
	}

	.poplist {
		padding: 30rpx;

		.botList {
			height: 120rpx;
			width: 100%;
			border-bottom: 1rpx solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.poplist2 {
		width: 100%;
		height: 70%;
		overflow-y: scroll;
		position: absolute;
		bottom: 0;
		background-color: #fff;
	}

	.active {
		color: #00D075;
	}

	:deep .u-drawer-right {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>